<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
</head>
<body>
<div id="app">

  <h1>{{msg}}</h1>

  <button @click="changeName">修改名字</button>
  <button @click="deleteAge">删除年龄属性</button>
  <button @click="setSex">添加性别属性</button>
  <p>姓名是：{{person.name}}</p>
  <p>年龄是:{{person.age}}</p>
  <p>性别是:{{person.sex}}</p>

</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        msg:'hello Vue~~~',
        person:{
          name:'wdh',
          age:18
        }
      }
    },
    methods:{
      changeName(){
        this.person.name = '万登豪'
      },
      deleteAge(){
        //删除对象的属性可以使用vue自带封装的$delete方法，这个方法在实例上可以通过this调用
        this.$delete(this.person,'age')
      //  或者可以用Vue原型上的方法delete
      //   Vue.delete(this.person,'age')
      },
      setSex(){
      //  创建和删除相同，同样在实例上面和在原型上面都有方法可以实现
      //   this.$set(this.person,'sex','男')
        Vue.set(this.person, "sex", "男")
      }
    }
  })
</script>

</body>
</html>